*{
    box-sizing: border-box;
}
@font-face{
    font-family: 'PingFang Bold';
    src: url('./PingFangHeavy.ttf') format('truetype');
}
@font-face{
    font-family: 'PingFang Medium';
    src: url('./PingFangMedium.ttf') format('truetype');
}
@font-face{
    font-family: 'PingFang Light';
    src: url('./PingFangLight.ttf') format('truetype');
}
@font-face {
    font-family: 'iconfont';  /* project id 1540803 in iconfont.cn */
    src: url('//at.alicdn.com/t/font_1540803_wa9z1li635.eot');
    src: url('//at.alicdn.com/t/font_1540803_wa9z1li635.eot?#iefix') format('embedded-opentype'),
    url('//at.alicdn.com/t/font_1540803_wa9z1li635.woff2') format('woff2'),
    url('//at.alicdn.com/t/font_1540803_wa9z1li635.woff') format('woff'),
    url('//at.alicdn.com/t/font_1540803_wa9z1li635.ttf') format('truetype'),
    url('//at.alicdn.com/t/font_1540803_wa9z1li635.svg#iconfont') format('svg');
  }

body{
    font-family: 'PingFang Medium' 'Microsoft Yahei' 'Seogeo UI';
    font-size: 13px;
    background: #eaedf1;
}
.banner-static{
    width:100%;
    height:405px;
    background-size: cover;
    background: url(banner-static.png) center center no-repeat;
}
.login-form .ivu-form-item{
    margin-bottom: 12px;
}
.login-form .ivu-input.ivu-input-default::-webkit-input-placeholder{
    color:#ffffff80;
    text-shadow:none;
}
.login-form .ivu-input.ivu-input-default{
    border:2px #fff solid;
    border-radius: 5px;
    background: transparent;
    padding:12px 7px;
    height: auto;
    color:#fff;
    font-weight: bold;
    text-shadow: 0 2px 8px #ffffff;
}

.icon{
    font-family: 'iconfont';
    font-style: normal;
}
.icon.icon-search::before{
    content:'\e624';
}

.nav{
    height:50px;
    display: flex;
}

.nav-wrapper {
    position: absolute;
    top: 0;
    width: 1366px;
    left: 50%;
    transform: translateX(-50%);
    padding: 12px 24px;
}

.nav-extra {
    display: flex;
    justify-content: flex-end;
}

ul,li,p,h1,h2 {
    padding: 0;
    margin: 0;
    list-style: none;
}

.nav-extra .item {
    padding: 0 16px;
}

.nav-extra .trigger,.nav-extra .trigger a {
    color: #fff;
}

.nav-bar {
    width: 100%;
    background: #fff;
    display: flex;
    height: 50px;
    margin-top: 36px;
    box-shadow: 0 8px 24px #00000085;
    align-content: flex-end;
}

.nav-bar .item {
    flex-grow: 0;
    flex-shrink: 0;
    text-align: center;
    width: 125px;
}

.nav-bar .item.stretched {
    flex-grow: 1;
    display: flex;
    justify-content: flex-end;
}

.nav-bar .item a {
    line-height: 47px;
    color: #333;
    font-size: 14px;
    transition: .3s;
    display: block;
    border-bottom: 3px #fff solid;
}

.nav-bar .textbox {
    background: none;
    border: none;
    outline: none;
    font-size: 14px;
    min-width: 190px;
}

.nav-bar .btn {
    cursor: pointer;
    padding: 0 16px;
    background: none;
    border: none;
    outline: none;
    transition: .3s;
}

.nav-bar .btn:hover {
    box-shadow: 0 3px 7px #00000020;
}

.nav-bar .item a:hover {
    border-bottom: 3px #2d8cf0 solid;
    color: #2d8cf0;
    box-shadow: 0 3px 8px #00000010 inset;
    background: #2d8cf010;
}
.row {
    width: 1300px;
    height: auto;
    margin: 0 auto;
}

.row-header {
    padding: 24px 0 36px 0;
    font-size: 24px;
    color: #141414;
    font-family: 'PingFang Bold','Microsoft Yahei';
    display: flex;
}

.row-header .title {
    border-left: 7px #00479d solid;
    padding-left: 14px;
    flex-grow:1;
}
.col-header {
    padding: 16px;
    position: relative;
    width: 225px;
    height: 325px;
    background: url(col-header-bg.png);
    order: 0;
    margin-right: 16px;
    box-shadow: 0 3px 8px #00000020;
    flex-grow: 0;
    flex-shrink: 0;
}

.row-body {
    display: flex;
    flex-flow: row nowrap;
}
.row-body-vertical{
    display: block;
}

.col-header .pattern {
    padding-top: 24px;
}

.col-header .title {
    color: #fff;
    font-size: 18px;
    font-family: 'PingFang Bold', 'Microsoft Yahei';
    padding: 18px 0;
}

.col-header .subtitle {
    font-size: 12px;
    height: 36px;
    line-height: 1.2em;
    color: #fff;
    padding-bottom: 24px;
}

.col-header .trigger {
    position: absolute;
    bottom: 24px;
}

.col-header .trigger .btn {
    color: #fff;
    font-size: 14px;
    background: none;
    outline: none;
    border: none;
    transition: .3s;
    cursor: pointer;
}

.col-header .trigger .btn:hover {
    text-shadow: 0 8px 19px #00000075;
}

.col-body {
    background: #fff;
    height:325px;
    width:920px;
}

.col-footer {
    border-left: 1px #eaedf1 solid;
    background: #fff;
    order: 2;
    width: 185px;
}

.unit-empty-wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: column nowrap;
}

.unit-empty-wrapper .text {
    font-size: 16px;
    color: #aaa;
}
.unit-empty-wrapper .pattern-empty{
    background: url('./non-data.png') center center no-repeat;
    width:100px;
    height: 100px;
    background-size: contain;
}
.unit-empty-wrapper .text.small{
    font-size: 12px;
    transform-origin: top center;
    transform: scale(0.7);
}
.unit-empty-wrapper .text {
    font-size: 16px;
    color: #aaa;
}

.footer-wrapper {
    width: 100%;
    background: #fff;
    margin-top: 45px;
}

.footer-wrapper .footer {
    width: 1300px;
    height: auto;
    margin: 0 auto;
}

ul.support {
    display: flex;
    justify-content: space-between;
}

.support .item {
    padding: 24px 0 18px 0;
}

.support .title {
    color: #4586ec;
    font-size: 16px;
    font-family: 'PingFang Bold';
    padding-bottom: 24px;
}

.support .subtitle,.support .subtitle a {
    color: #141414;
    font-family: 'PingFang Bold','Microsoft Yahei';
    font-size: 14px;
    padding-bottom: 10px;
}

.support .abstract,.support .abstract a {
    font-size: 12px;
    color: #999;
    line-height: 1.5em;
}

.author {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    padding-bottom: 12px;
}

.author .text {
    color: #999;
    font-size: 12px;
}
.col-body .unit {
    flex-grow: 1;
    flex-shrink: 1;
    display: flex;
    padding: 30px;
    float:left;
}

.unit .unit-header {
    flex-grow: 0;
    flex-shrink: 0;
    margin-right: 26px;
}

.unit .unit-body .title {
    font-size: 18px;
    color: #131313;
    font-family: 'PingFang Bold';
}

.unit .unit-body .subtitle {
    padding-top: 12px;
    line-height: 1.5em;
    font-size: 12px;
    color: #999;
    min-height: 60px;
    display: block;
}

.btn {
    border: none;
    outline: none;
    background: none;
    cursor: pointer;
    border-radius: 5px;
    transition: .3s;
}

.btn:hover {
    box-shadow: 0 2px 5px #00000010;
}

.unit .btn,.grid-view .btn {
    color: #5e96ef;
    font-size: 14px;
}

.col-footer .unit {
    padding:14px;
    display: flex;
}
.col-footer .unit-header {
    width: 24px;
    height: 24px;
}

.unit-header img {
    width: 100%;
}

.col-footer .unit-body .text {
    font-size: 14px;
    font-family: 'PingFang Bold';
    padding-top: 3px;
    display: block;
}
.segment {
    display: flex;
    flex-flow: row wrap;
    padding-top: 36px;
    padding-bottom: 24px;
    width:100%;
}

.segment .item {
    border: 1px #4888ed solid;
    color: #4888ed;
    background: #fff;
    font-size: 16px;
    transition: .3s;
    border-radius: 7px;
    padding:6px 32px;
    margin-right: 10px;
    cursor: pointer;
    flex-shrink: 0;
    margin-bottom:12px;
}

.segment .item.actived {
    color: #fff;
    background: #4888ed;
    text-shadow: 0 2px 6px #00000088;
}


ul.grid-view {
    width: 100%;
    display: flex;
    flex-flow: row wrap;
    margin-bottom:24px;
}

.grid-view .item {
    background: #fff;
    padding: 15px;
    margin: 5px;
    width: 250px;
    flex-shrink: 0;
    border-radius: 7px;
    text-align: center;
}

.grid-view .item .icon {
    margin-top: 35px;
    width: 72px;
    margin-bottom: 35px;
}

.grid-view .item .title {
    font-size: 20px;
    font-family: 'PingFang Bold';
    color: #141414;
}

.grid-view .abstract {
    color: #999;
    text-align: left;
    padding: 24px;
    font-size: 12px;
    line-height: 1.5em;
    height: 96px;
}
.banner-static .text-wrapper {
    width: 1318px;
    margin: 0 auto;
    position: relative;
    top: 185px;
}

.text-wrapper .title {
    font-family: 'PingFang Bold';
    font-size: 60px;
    color: #fff;
    display: block;
    text-shadow: 0 8px 24px #000000aa;
}

.text-wrapper .eng {
    display: block;
    color: #fff;
    text-shadow: 0 8px 16px #000000aa;
    font-family: 'PingFang Light';
    font-size: 24px;
}

.text-wrapper span.subtitle {
    display: block;
    padding-top: 24px;
    color: #fff;
    font-size: 16px;
    text-shadow: 0 5px 15px #000000aa;
    font-weight: bold;
}